<template>
  <view>
    <u-cell-group>
      <u-cell title="账号">
        <text slot="value">{{ userInfo.nickName || '' }}</text>
      </u-cell>
      <!-- <u-cell title="头像" isLink @click="handlePhoto">
        <u-avatar slot="value" :src="userInfo.pic" shape="circle"></u-avatar>
      </u-cell> -->
      <u-cell title="头像" isLink @click="handlePhoto">
        <u-avatar slot="value" :src="userInfo.pic" shape="circle"></u-avatar>
      </u-cell>
      <u-cell title="昵称" isLink>
        <u--input
          slot="value"
          placeholder="请输入"
          v-model="userInfo.realName"
          :maxlength="11"
          border="none"
        ></u--input>
      </u-cell>
      <u-cell title="性别" isLink @click="showSex = true">
        <text slot="value">{{ userInfo.sex == "M" ? "男" : "女" }}</text>
      </u-cell>
      <u-cell title="生日" isLink @click="handleShowBrthday">
        <text slot="value">{{ userInfo.birthDate || '' }}</text>
      </u-cell>
      <u-cell title="手机号" isLink>
        <u--input
          slot="value"
          :maxlength="11"
          placeholder="请输入"
          v-model="userInfo.userMobile"
          border="none"
        ></u--input>
      </u-cell>
      <u-cell title="邮箱" isLink>
        <u--input
          slot="value"
          placeholder="请输入"
          v-model="userInfo.userMail"
          border="none"
        ></u--input>
      </u-cell>
      <!-- <u-cell
        size="large"
        title="单元格"
        value="内容"
        label="描述信息"
      ></u-cell> -->
    </u-cell-group>

    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    />
    <u-datetime-picker
      ref="datetimePicker"
      :show="showBirthday"
      v-model="dateValue"
      :minDate="-28800000"
      mode="date"
      @cancel="showBirthday = false"
      @confirm="handleDateConfirm"
    ></u-datetime-picker>

    <u-button type="primary" text="保存" @click="handleSave"></u-button>
  </view>
</template>

<script>
import http from "../../utils/http";
import { uploadFile } from "../../utils/tx-upload";
import config from "../../utils/config";
export default {
  data() {
    return {
      userInfo: {},
      showSex: false,
      showBirthday: false,
      actions: [
        {
          name: "男",
          value: "M",
        },
        {
          name: "女",
          value: "W",
        },
      ],
      dateValue: Number(new Date("2020-10-04")),
    };
  },

  onLaunch: function (options) {},
  onShow: function (options) {
    // console.log(uni.getStorageSync('userInfo'))
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
  onReady() {},
  methods: {
    handlePhoto() {
      let that = this;
      uni.chooseImage({
        count: 1,
        success: (option) => {
          console.log(option, "========图片");
          // 前台处理上传图片
          uploadFile(option.tempFiles[0], {
            success: (res) => {
              console.log(res, "上传成功");
              that.userInfo.pic = res.Location;
            },
            error: (err) => {
              console.log(err, "上传失败");
            },
          });

          // 这个是后端接口上传图片
          // uni.uploadFile({
          //   url: config.upload + '/admin/file/upload/element', //请求接口地址
          //   // filePath: filePath, //文件地址
          //   name: 'file',
          //   filePath: res.tempFilePaths[0],
          //   formData: {
          //     file:res.tempFiles[0]
          // 	},
          //   file: res.tempFiles[0],
          //   data: {file: res.tempFiles[0]},
          //   method:'post',
          //   header: {
          //    'Authorization': uni.getStorageSync('token'),
          //   },
          //   success(res2) {
          //     console.log("请求成功的结果", res2.statusCode, res2);
          //     // console.log(res2);
          //     that.userInfo.pic = res2.data
          //   },
          //   fail(err) {
          //     console.log("请求失败的结果", err);
          //     // console.log(err);
          //   },
          // });
        },
      });
    },
    handleSave() {
      uni.showLoading({
        title: "加载中",
      });
      this.handleUpdate();
      // console.log(this.userInfo,'=======userInfo')
    },
    handleDateConfirm(obj) {
      console.log(obj);
      // console.log(uni.$u.timeFormat(this.value1,'yyyy-mm-dd'))
      this.userInfo.birthDate = uni.$u.timeFormat(obj.value, "yyyy-mm-dd");
      this.showBirthday = false;
    },
    handleShowBrthday() {
      this.dateValue = Number(new Date(this.userInfo.birthDate));

      this.showBirthday = true;
    },

    sexSelect(obj) {
      // console.log(obj,'=======')
      this.userInfo.sex = obj.value;
    },
    handleUpdate() {
      let that = this;
      var params = {
        url: "/p/user/setUserInfo",
        method: "PUT",
        data: {
          avatarUrl: that.userInfo.pic,
          realName: that.userInfo.realName,
          userMobile: that.userInfo.userMobile,
          birthDate: that.userInfo.birthDate,
          userMail: that.userInfo.userMail,
          sex: that.userInfo.sex,
        },
        callBack: function (res) {
          console.log(res, "修改成功");
          uni.hideLoading();
          uni.showToast({
            title: "修改成功",
          });

          uni.navigateBack({
            delta: 1,
          });
        },
      };
      http.request(params);
      //  data: {
      //     avatarUrl:
      //       "http://rro0pcv12.hd-bkt.clouddn.com/2023/03/1576be704a104ab9929233bc8d50e3ef.png",
      //     realName: "果冻111",
      //     userMobile: "13169380567",
      //     birthDate: "2020-10-1",
      //     userMail: "1943978513@qq.com",
      //     sex: "M",
      //   },
    },
  },
  onHide: function () {},
  onError: function (msg) {},
  //options(path,query,isEntryPage)
  onPageNotFound: function (options) {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .u-input {
    input {
      text-align: right !important;
    }
    .u-input__content {
      min-width: 190px !important;
    }
  }
  .u-button {
    position: fixed !important;
    bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
        background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
  }
}
</style>